<template>
  <!-- 弹出层 -->
  <div class="modal fade"
       id="cooUserModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title"
              id="myModalLabel">新增/编辑人员</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label for=""
                     class="col-sm-4 control-label">姓名<label style="color: red;">*</label>：</label>
              <div class="col-sm-8">
                <input type="text"
                       class="form-control"
                       v-model="user.accountName"
                       placeholder="请输入姓名"
                       :disabled="cooUserInfo.optType=='V'">
              </div>
            </div>
            <div class="form-group">
              <label for=""
                     class="col-sm-4 control-label">手机（帐号）<label style="color: red;">*</label>：</label>
              <div class="col-sm-8">
                <input type="text"
                       class="form-control"
                       v-model="user.phone"
                       placeholder="请输入手机、帐号"
                       :disabled="cooUserInfo.optType=='V'">
              </div>
            </div>
            <div class="form-group"
                 v-if="cooUserInfo.optType==='A'">
              <label for=""
                     class="col-sm-4 control-label">密码<label style="color: red;">*</label>：</label>
              <div class="col-sm-8">
                <input type="password"
                       class="form-control"
                       v-model="user.password"
                       placeholder="请输入密码">
              </div>
            </div>
            <div class="form-group"
                 v-if="cooUserInfo.optType==='A'">
              <label for=""
                     class="col-sm-4 control-label">确认密码<label style="color: red;">*</label>：</label>
              <div class="col-sm-8">
                <input type="password"
                       class="form-control"
                       v-model="user.rePassword"
                       placeholder="请确认密码">
              </div>
            </div>
            <!--div class="form-group" v-show="cooUserInfo.optType==='A'">
	                  	<label for="" class="col-sm-4 control-label">是否管理员<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
							<select class="form-control" v-model="user.accountType" :disabled="cooUserInfo.optType=='V'">
								<option v-for="at in accountTypeOption" v-bind:value="at.value">{{ at.text }}</option> 
							</select>
						</div>
	                </div -->
            <div class="form-group">
              <label for=""
                     class="col-sm-4 control-label">状态<label style="color: red;">*</label>：</label>
              <div class="col-sm-8">
                <select class="form-control"
                        v-model="user.status"
                        :disabled="cooUserInfo.optType=='V'">
                  <option v-for="statusOption in statusOptions"
                          v-bind:value="statusOption.value">{{ statusOption.text }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
          <button type="button"
                  class="btn checkedBtn"
                  v-show="saveUserBtnShow && cooUserInfo.optType!='V'"
                  @click="saveUser">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //接收父组件的绑定值
  props: ["cooUserInfo"],
  data() {
    return {
      //机构信息对象
      user: {
        id: "",
        deptId: "",
        accountName: "",
        phone: "",
        password: "",
        rePassword: "",
        userRoleId: "",
        accountType: 0,
        status: "1"
      },
      statusOptions: [
        { text: "禁用", value: "0" },
        { text: "在用", value: "1" }
      ],
      accountTypeOption: [{ text: "是", value: "0" }],
      saveUserBtnShow: true
    };
  },
  mounted() {},
  watch: {
    //监听父组件绑定值是否改变
    cooUserInfo: {
      handler: function (val, oldVal) {
        //初始化操作类型optType，控制密码框是否进行展示
        //初始化机构
        this.user.deptId = this.cooUserInfo.orgId;
        if ("U" == this.cooUserInfo.optType) {
          //当编辑员工时，不需要部门id,否则会更新掉原来的部门
          this.user.deptId = "";
        }
        this.initUser();
      },
      //深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
      deep: true
    },
    "user.accountType": function (newValue, oldValue) {
      if (newValue == 0) {
        this.user.userRoleId = "";
      }
    }
  },
  methods: {
    //初始化机构信息
    initUser() {
      var _self = this;
      var userId = _self.cooUserInfo.partnerId;
      var optType = _self.cooUserInfo.optType;
      //存在机构ID,并且为修改操作时,根据ID加载一遍机构数据
      if (userId && ("U" == optType || "V" == optType)) {
        var params = {};
        params["id"] = userId;
        var body = {};
        body.params = params;
        var url = _self.utilHelper.apiUrl + "/api/getPartnerDetail";
        _self.$http.post(url, body).then(
          (response) => {
            var resData = response.body.resData;
            var partnerInfo = resData.partnerInfo;
            _self.user.id = partnerInfo.id;
            _self.user.accountName = partnerInfo.accountName;
            _self.user.phone = partnerInfo.phone;
            _self.user.status = partnerInfo.status;
            _self.user.accountType = partnerInfo.accountType;
            _self.user.userRoleId = partnerInfo.userRoleId;
          },
          (response) => {}
        );
      } else {
        _self.user.id = "";
        _self.user.accountName = "";
        _self.user.password = "";
        _self.user.rePassword = "";
        _self.user.phone = "";
        _self.user.status = 1;
        _self.user.accountType = 0;
      }
    },
    saveUser() {
      var _self = this;
      //执行新增或修改
      if (_self.userValidate()) {
        _self.saveUserBtnShow = false;
        var body = {};

        var url = _self.utilHelper.apiUrl + "/api/addPartner";
        if (_self.cooUserInfo.optType == "U") {
          url = _self.utilHelper.apiUrl + "/api/editPartner";
        } else {
          // 需求 新增为普通成员 20201127
          _self.user.accountType = 1;
        }
        var params = this.user;
        body.params = params;
        _self.$http.post(url, body).then(
          (response) => {
            var resData = response.body.resData;
            var result = resData.result;
            var resultMsg = resData.resultMsg;
            //输出操作信息
            layer.msg(
              resultMsg,
              {
                time: 1000
              },
              function () {
                //关闭弹出层
                _self.saveUserBtnShow = true;
                if (result == "1") {
                  $("#cooUserModal").modal("hide");
                  //子组件向父组件传递信号: 调用父组件中对子组件的监听
                  _self.$emit("cooUserListener");
                }
              }
            );
          },
          (response) => {}
        );
      }
    },
    userValidate() {
      var accountName = this.user.accountName;
      var phone = this.user.phone;
      var password = this.user.password;
      var rePassword = this.user.rePassword;
      if (!accountName) {
        layer.msg("员工姓名不能为空", {
          time: 2000
        });
        return false;
      }
      if (!phone) {
        layer.msg("手机号码不能为空", {
          time: 2000
        });
        return false;
      } else {
        var reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
        if (!reg.test(phone)) {
          layer.msg("手机号码格式错误", {
            time: 2000
          });
          return false;
        }
      }
      if (!password && this.cooUserInfo.optType == "A") {
        layer.msg("密码不能为空", {
          time: 2000
        });
        return false;
      }
      if (password && this.cooUserInfo.optType == "A") {
        var reg = /^[a-zA-Z0-9~!@#$%^&*()-_+=`{}\[\]:;"'<>?,.\/\\]{8,20}$/;
        if (!reg.test(password)) {
          layer.msg(
            "密码为长度8-20位的数字、字母、下划线或常用字符(`~!@#$%^&*()-_+={}[]:;\"'<>?,./)",
            {
              time: 3000
            }
          );
          return false;
        }
      }
      if (!rePassword && this.cooUserInfo.optType == "A") {
        layer.msg("请填写确认密码", {
          time: 2000
        });
        return false;
      }
      if (password != rePassword && this.cooUserInfo.optType == "A") {
        layer.msg("两次密码输入不一致", {
          time: 2000
        });
        return false;
      }
      return true;
    }
  }
};
</script>